<template>
  <el-drawer v-model="drawerVisible" :direction="'ltr'" :show-close="false" size="243px">
    <template #header>
      <div class="logo flx-center">
        <img class="logo-img" src="@/assets/images/favicon.ico" alt="logo" />
        <span class="logo-text">{{ title }}</span>
      </div>
    </template>
    <div>
      <el-scrollbar>
        <el-menu
            :router="false"
            :default-active="activeMenu"
            :collapse="false"
            :unique-opened="accordion"
            :collapse-transition="false"
        >
          <SubMenu :menu-list="menuList"/>
        </el-menu>
      </el-scrollbar>
    </div>

  </el-drawer>

  <div v-draggable v-show="isMobile" class="menu-box flx-center"
       @click="openMenuDrawer" @touchmove.prevent>
    <el-icon>
      <Menu/>
    </el-icon>
  </div>
</template>

<script setup>
import {Menu} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import {useAuthStore} from "@/stores/modules/auth.js";
import {useGlobalStore} from "@/stores/modules/global.js";
import {useRoute} from "vue-router";

const title = import.meta.env.VITE_GLOB_APP_TITLE;

const route = useRoute();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const accordion = computed(() => globalStore.accordion);
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path));

const isMobile = computed(() => globalStore.isMobile);

const handleClickMenu = (subItem) => {
  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  router.push(subItem.path);
};

// 打开主题设置
const drawerVisible = ref(false);
const openMenuDrawer = () => {
  drawerVisible.value = true
}

</script>

<style scoped lang="scss">
@import "index";
</style>
